<template>
  <h3>上报路况</h3>
  <van-form class="form" @failed="onFailed" @submit="onSubmit">
    <label>事件类型</label>

    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>

    <van-cell-group inset>
      <!-- 通过 pattern 进行正则校验 -->
      <label>事件地址</label>
      <van-field
        v-model="value2"
        name="pattern"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <label>建筑标识</label>
      <van-field
        v-model="value3"
        name="pattern"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <label>事件描述</label>
      <van-field
        v-model="value4"
        name="pattern"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { addEventHttp } from "../../../request/api/event"
import { useRouter } from "vue-router"
const $route = useRoute()
const res = $route.query

const $router = useRouter()

const value1 = ref("碰撞")
const option1 = [
  { text: "碰撞", value: "碰撞" },
  { text: "刮擦", value: "刮擦" },
  { text: "失火", value: "失火" },
  { text: "翻车", value: "翻车" },
  { text: "碾压", value: "碾压" },
  { text: "其他", value: "其他" },
]

const value2 = ref("")
const value3 = ref("")
const value4 = ref("")
// 验证不通过触发
const onFailed = (errorInfo) => {
  console.log("failed", errorInfo)
}

// 验证通过触发
const onSubmit = () => {
  addEventHttp(
    res.id,
    value1.value,
    value2.value,
    value3.value,
    value4.value,
    res.name
  ).then((res) => {
    ElMessage({
      message: "事件上报成功",
      type: "success",
    })
    $router(`/mobilehome?id=${res.id}&name=${res.name}`)
  })
}
</script>

<style scoped>
h3 {
  position: relative;
  margin-top: 10px;
}
</style>
